<template>
	<uni-popup ref="popup">
		<view class="rounded-xl bg-white p-3-1 border b-active" style="width: 600rpx">
			<view class="text-center mb-3-1">
				<text class="text-l color-active">绑定储值卡</text>
			</view>
			<view class="mb-3-1">
				<b-login-input placeholder="请输入卡号" v-model="cardNo"></b-login-input>
			</view>
			<view class="mb-3-1">
				<b-login-input placeholder="请输入密码" v-model="passwd"></b-login-input>
			</view>
			<view>
				<button
					class="py-2-2 text-center rounded-l bottom-shadow mx-3-1 bind-btn text-l font-semibold"
					style="background-color: #246a49; color: #fdf6e5"
					hover-class="opacity-80"
					hover-start-time="0"
					hover-stay-time="50"
					@click="handleBind"
				>
					绑定
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { bindStored } from "@/base/api/member.js";

const emits = defineEmits(["bindSuc"]);

const popup = ref();
const cardNo = ref("");
const passwd = ref("");
async function handleBind(){
	if(!cardNo.value) {
		return getApp().globalData.toast("请输入卡号");
	}
	if(!passwd.value) {
		return getApp().globalData.toast("请输入密码");
	}
	const re = await bindStored({
		cardNo: cardNo.value,
		passwd: passwd.value,
	});
	if(re) {
		getApp().globalData.toast("绑定成功", true);
		emits("bindSuc");
		popup.value.close();
	}
}

defineExpose({
	open() {
		cardNo.value = "";
		passwd.value = "";
		popup.value.open();
	},
});
</script>

<style>
.bind-btn {
	line-height: 1;
	border-radius: 48rpx;
}
.bind-btn::after {
	content: '';
	display: none;
}
</style>
